<template>
  <!-- <view v-if="userInfo.is_line == 2">
    <button class="isIine" hover-class="none" style="width:100vw;height:100vh;background:transparent"
      @getphonenumber="getphonenumber" open-type="getPhoneNumber"></button>
  </view> -->
  <view class="boxs">
    <uv-navbar :placeholder="false" title="首页" bgColor="transparent" leftIcon=" " :titleStyle="{
      color: '#fff'
    }" :autoBack="true"></uv-navbar>
    <uv-swiper indicator :list="topList" height="973rpx" radius="0" keyName="image" @click="
      (e) => {
        swiperClick(topList[e]);
      }
    "></uv-swiper>
   <view class="flex-col-ali m-b-18 content" @click="loginClick">
      <uv-image v-if="!userInfo.mobile" :src="ASSETSURL + 'signUp.png'" width="686rpx" height="128rpx"
        radius="12rpx"></uv-image>
      <uv-image v-else-if="banner" :src="banner[0]?.image" width="686rpx" height="128rpx" radius="12rpx"></uv-image>
    </view>
    <view class="flex-col-ali">
      <uv-image v-if="banner" :src="banner[1]?.image" @click="tool.jump_nav('/packageDiy/AIanalytics/AIanalytics')" width="686rpx"
        height="150rpx" radius="12rpx"></uv-image>
    </view>
    <view class="p-x-32" v-if="middleList.length > 0">
      <view class="font-32 font-weight-bold m-t-30 m-b-18">新品首发</view>
      <view class="flex-bet" >
       <view>
          <uv-image :src="middleList[0]?.image" @click="swiperClick(middleList[0])" width="316rpx" height="332rpx"
            radius="12rpx"></uv-image>
        </view>
       <view class="flex-col-bet">
          <image v-if="middleList[1] && middleList" :src="middleList[1]?.image" @click="swiperClick(middleList[1])" mode="aspectFill"
            class="middle1"></image>
          <image v-if="middleList[2] && middleList" :src="middleList[2]?.image" @click="swiperClick(middleList[2])" mode="aspectFill"
            class="middle1"></image>
        </view>
      </view>
    </view>
	<view class="font-32 p-x-32 font-weight-bold m-t-30"  v-if="suggestOne">推荐商品</view>
    <view class="sp-t flex-bet m-x-32 m-t-24" @click="getPamoey(suggestOne)" v-if="suggestOne">
      <view class="m-x-36 font-weight-middle flex-aro-col m-y-50 flex-1">
        <view class="font-32 font-weight-middle text-ellipsis-2">{{ suggestOne.product_name }}</view>
        <view class="text-money font-36 font-weight-bold">¥{{ suggestOne.price / 100 }}</view>
        <dy-button width="150rpx" height="56rpx">
          <text class="font-24 text-white">立即购买</text>
        </dy-button>
      </view>
      <view class="" style="border-radius: 12rpx">
        <uv-image :src="suggestOne.image" width="330rpx" height="304rpx"
          style="border-radius: 12rpx; overflow: hidden"></uv-image>
      </view>
    </view>
    <view class="">
      <productList :list="suggestList" isRecommend></productList>
    </view>
    <view class="p-28 p-t-44">
      <block v-for="(item, index) in bottomList" :key="index">
        <image :src="item.image" @click="swiperClick(item)" mode="widthFix" class="w100 m-b-24"
          style="border-radius: 12rpx"></image>
      </block>
      <view class="flex justify-cen m-b-50 text-greey font-24">
        没有更多内容了~
      </view>
    </view>
  </view>
  <uv-popup ref="indexPop" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" radius="12rpx">
    <view class="flex-col-ali">
      <u-image :src="indexImg.image" class="m-b-50" width="558rpx" height="669rpx" radius="12rpx"></u-image>
      <u-icon name="close-circle" size="82rpx" color="#fff" @click="closePop"></u-icon>
    </view>
  </uv-popup>
  <dy-drag></dy-drag>
  <dy-login ref="login"></dy-login>
  <tabbar :number="0"></tabbar>
</template>

<script setup>
import { getUserPop } from '@/api/api';
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { useCounter } from '@/mixins/userHooks';
const { getUserInfo, userInfo, isLogin, tool } = useCounter();
import { ShopCenterApi, LoginCenterApi } from '../../api/serves';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';

const login = ref(null);
const indexPop = ref(null);
const topList = ref([]);
const middleList = ref([]); 
const bottomList = ref([]);
const banner = ref([{},{}]);
const suggestList = ref([]);
const suggestOne = ref({});
const indexImg = ref({});
onShow(() => {
  getbanner();
  getSuggestProduct();
  getUserPops();

});
const getUserPops = () => {
  getUserPop().then((res) => {
    console.log(res, 'res');
    if (res.code == 1) {
      if (!res.data) {
        indexPop.value.open();
      }
    }
  });
};
onLoad((ope) => {
  console.log(ope.share_id, '-----------');
  if (ope.share_id) {
    uni.setStorageSync('share_id', ope.share_id);
  }
});
// 商品详情
const getPamoey = (e) => {
  console.log(e, '---------');
  route({
    url: '/pagesA/pages/productList/productDetails',
    params: {
      id: e.id
    }
  });
};
// 关闭首页弹窗
const closePop = () => {
  indexPop.value.close();
};
const getphonenumber = async (e) => {
  tool.loading('登录中...');
  try {
    console.log('授权手机号', e);
    if (!e.detail.code) {
      tool.alert('获取手机号失败');
      tool.loading_h();
      return;
    }
    let res = await LoginCenterApi.de_mobile({ code: e.detail.code });
    if (!res.data?.mobile) {
      tool.alert('解析手机号失败');
      tool.loading_h();
      return;
    }
    await getUserInfo();

    tool.loading_h();
  } catch (error) {
    tool.loading_h();
    tool.alert('登录失败，请重试');
    console.log(error, 'error');

  }
};
// 获取推荐产品
const getSuggestProduct = async () => {
  let { code, data, msg } = await ShopCenterApi.getSuggestProduct({ locate: 1 });
  if (code != 1) return;
  suggestOne.value = data.shift();
  suggestList.value = data;
  console.log(suggestList, suggestOne, '123');
};
// 获取banner信息
const getbanner = async () => {
  let { code, data, msg } = await ShopCenterApi.getBanner({ level: 1 });
  if (code != 1) return;
  console.log(data, '------------------------');
  indexImg.value = data?.popup[0];
  topList.value = data.top;
  data.middle.sort((a, b) => {
    if (a.number === 1) return -1;
    if (b.number === 1) return 1;
    return a.number - b.number; // 按数字升序排列
  });
  data.bottom.sort((a, b) => {
    if (a.number === 1) return -1;
    if (b.number === 1) return 1;
    return a.number - b.number; // 按数字升序排列
  });
  middleList.value = data.middle;
  bottomList.value = data.bottom;
  banner.value = data.banner;
};
const loginClick = () => {
  if (userInfo.value.mobile) {
    route({
      url: '/pagesA/pages/myDesign/coupon',
    });
  } else {
    login.value.open();
  }
};
const recommend = reactive({}); //第一个推荐商品
</script>
<style>
page {
  background: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
.isIine {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

::v-deep .productList {
  margin-top: 22rpx !important;
}

::v-deep .uv-swiper__indicator {
  bottom: 90rpx !important;
  // width: 10px;
  // height: 10px;
  // background: red !important;
}

.boxs {
  width: 100vw;
  min-height: 100vh;
}

.content {
  width: 100vw;
  margin-top: -64rpx;
  position: relative;
  z-index: 10;
  border-radius: 12rpx;
  overflow: hidden;
}

.middle {
  width: 310rpx;
  height: 332rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.middle1 {
  width: 360rpx;
  height: 159rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.sp-t {
  width: 686rpx;
  // height: 304rpx;
  background: #fff;
  border-radius: 12rpx;
}
</style>
